﻿//**********************图片上传预览插件************************ 
//作者：jack_tang(2013-10-16) 
//Email：thxallinone@163.com
//版本：1.0 

//说明：图片上传预览插件 
//上传的时候可以生成固定宽高范围内的等比例缩放图 

//参数设置： 
//width 存放图片固定大小容器的宽 
//height 存放图片固定大小容器的高 
//previewDiv 页面DIV的JQuery的id 
//imgType 数组后缀名 
//**********************图片上传预览插件************************* 
(function($) {
	jQuery.fn.extend({
		
		/*图片上传预览  deprecated */
		uploadPreview : function(opts) {
		    opts = jQuery.extend({
				width : 0,
				height : 0,
				previewDiv : "previewDiv",
				imgType : [ "gif", "jpeg", "jpg", "bmp", "png" ],
				callback : function() {
					return false;
				}
			}, opts || {});
			var _self = this;
			var _this = $(this);
			var previewDiv = $("#"+opts.previewDiv);
			previewDiv.width(opts.width);
			previewDiv.height(opts.height);
	
			autoScaling = function() {
				if ($.browser.version == "7.0"
						|| $.browser.version == "8.0")
					previewDiv.get(0).filters
							.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
				var img_width = previewDiv.width();
				var img_height = previewDiv.height();
				if (img_width > 0 && img_height > 0) {
					var rate = (opts.width / img_width < opts.height
							/ img_height) ? opts.width / img_width
							: opts.height / img_height;
					if (rate <= 1) {
						if ($.browser.version == "7.0"
								|| $.browser.version == "8.0")
							previewDiv.get(0).filters
									.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
						previewDiv.width(img_width * rate);
						previewDiv.height(img_height * rate);
					} else {
						previewDiv.width(img_width);
						previewDiv.height(img_height);
					}
					var left = (opts.width - previewDiv.width()) * 0.5;
					var top = (opts.height - previewDiv.height()) * 0.5;
					previewDiv.css({
						"margin-left" : left,
						"margin-top" : top
					});
					previewDiv.show();
				}
			};
			_this.change(function() {
				if (this.value) {
					if (!RegExp(
							"\.(" + opts.imgType.join("|")
									+ ")$", "i").test(
							this.value.toLowerCase())) {
						alert("图片类型必须是"
								+ opts.imgType.join("，")
								+ "中的一种");
						this.value = "";
						return false;
					}
					previewDiv.hide();
					if ($.browser.msie) {
						if ($.browser.version == "6.0") {
							var img = $("<img />");
							previewDiv.replaceWith(img);
							previewDiv = img;
	
							var image = new Image();
							image.src = 'file:///' + this.value;
	
							previewDiv.attr('src', image.src);
							autoScaling();
						} else {
							previewDiv
									.css({
										filter : "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)"
									});
							previewDiv.get(0).filters
									.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
							try {
								previewDiv.get(0).filters
										.item('DXImageTransform.Microsoft.AlphaImageLoader').src = this.value;
							} catch (e) {
								alert("无效的图片文件！");
								return;
							}
							setTimeout("autoScaling()", 100);
	
						}
					} else {
						var img = $("<img />");
						previewDiv.replaceWith(img);
						previewDiv = img;
						previewDiv.attr('src', this.files.item(0)
								.getAsDataURL());
						previewDiv.css({
							"vertical-align" : "middle"
						});
						setTimeout("autoScaling()", 100);
					}
				}
		    });
		},
		
		//图片上传预览监听
		addPreviewListener : function(opts) {
		    opts = jQuery.extend({
				width : 0,
				height : 0,
				previewDiv : "previewDiv",
				imgType : [ "gif", "jpeg", "jpg", "bmp", "png" ],
				callback : function() {
					return false;
				}
			}, opts || {});
		    
			var _this = $(this);
			var previewDiv = $("#"+opts.previewDiv);
			//previewDiv.width(opts.width);
			//previewDiv.height(opts.height);
			
		    //判断浏览器是否有FileReader接口
		    if(typeof FileReader =='undefined')
		    {
		       //previewDiv.css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口,无法使用图片本地预览,请更新浏览器获得最好体验');
		       previewDiv.css({'background':'none'}).html('亲,您的浏览器不支持HTML5的图片本地预览,请更新浏览器获得最佳体验!');
		        //如果浏览器是ie
		        if($.browser.msie===true)
		        {
		            //ie6直接用file input的value值本地预览
		            if($.browser.version==6)
		            {
		                _this.change(function(event){                        
		                      //ie6下怎么做图片格式判断?
		                      var src = event.target.value;
		                      //var src = document.selection.createRange().text;        
		                      //选中后 selection对象就产生了 这个对象只适合ie
		                      var img = '<img src="' + src + '" width="' + opts.width + 'px" height="' + opts.height + 'px" />';
		                      previewDiv.empty().append(img);
		                  });
		            }
		            //ie7,8使用滤镜本地预览
		            else if($.browser.version==7 || $.browser.version==8)
		            {
		                _this.change(function(event){
		                      $(event.target).select();
		                      var src = document.selection.createRange().text;
		                      var dom = previewDiv[0];
		                      //使用滤镜 成功率高
		                      dom.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= src;
		                      dom.innerHTML = '';
		                      //使用和ie6相同的方式 设置src为绝对路径的方式 有些图片无法显示 效果没有使用滤镜好
		                      /*var img = '<img src="'+src+'" width="200px" height="200px" />';
		                      previewDiv.empty().append(img);*/
		                 });
		            }
		        }
		        //如果是不支持FileReader接口的低版本firefox 可以用getAsDataURL接口
		        else if($.browser.mozilla===true)
		        {
		            _this.change(function(event){
		                //firefox2.0没有event.target.files这个属性 就像ie6那样使用value值 但是firefox2.0不支持绝对路径嵌入图片 放弃firefox2.0
		                //firefox3.0开始具备event.target.files这个属性 并且开始支持getAsDataURL()这个接口 一直到firefox7.0结束 不过以后都可以用HTML5的FileReader接口了
		                if(event.target.files)
		                {
		                  //console.log(event.target.files);
		                  for(var i=0;i<event.target.files.length;i++)
		                  {    
		                      var img = '<img src="' + event.target.files.item(i).getAsDataURL() + '" width="' + opts.width + 'px" height="' + opts.height + 'px"/>';
		                      previewDiv.empty().append(img);
		                  }
		                }
		                else
		                {
		                    //console.log(event.target.value);
		                    //$("#imgPreview").attr({'src':event.target.value});
		                }
		            });
		        }
		    }
		    else
		    {
		        // version 1
		        /*_this.change(function(e){
		          var file = e.target.files[0];
		          var fReader = new FileReader();
		          //console.log(fReader);
		          //console.log(file);
		          fReader.onload=(function(var_file)
		          {
		              return function(e)
		              {
		                  $("#imgPreview").attr({'src':e.target.result,'alt':var_file.name});
		              }
		          })(file);
		          fReader.readAsDataURL(file);
		          });*/
		          
		          //单图上传 version 2 
		          /*_this.change(function(e){
		                var file = e.target.files[0];
		                var reader = new FileReader();  
		                reader.onload = function(e){
		                    //displayImage($('bd'),e.target.result);
		                    //alert('load');
		                    $("#imgPreview").attr({'src':e.target.result});
		                }
		                reader.readAsDataURL(file);
		              });*/
		          //多图上传 input file控件里指定multiple属性 e.target是dom类型
		           _this.change(function(e){  
	                   for(var i=0;i<e.target.files.length;i++)
	                   {
	                       var file = e.target.files.item(i);
	                       //允许文件MIME类型 也可以在input标签中指定accept属性
	                       //console.log(/^image\/.*$/i.test(file.type));
	                       if(!(/^image\/.*$/i.test(file.type)))
	                       {
	                           continue;            //不是图片 就跳出这一次循环
	                       }
	                        
	                       //实例化FileReader API
	                       var freader = new FileReader();
	                       freader.readAsDataURL(file);
	                       freader.onload=function(e)
	                       {
	                           var img = '<img src="' + e.target.result + '" width="' + opts.width + 'px" height="' + opts.height + 'px"/>';
	                           previewDiv.empty().append(img);
	                       };
	                   }
	               });
		               
		          //处理图片拖拽的代码
		          var destDom = previewDiv[0];
		          destDom.addEventListener('dragover',function(event){
		              event.stopPropagation();
		              event.preventDefault();
		          },false);
		              
		          destDom.addEventListener('drop',function(event){
		              event.stopPropagation();
		              event.preventDefault();
		              var img_file = event.dataTransfer.files.item(0);                
		              //获取拖拽过来的文件信息 暂时取一个
		              //console.log(event.dataTransfer.files.item(0).type);
		              if(!(/^image\/.*$/.test(img_file.type)))
		              {
		                  alert('您还未拖拽任何图片过来,或者您拖拽的不是图片文件');
		                  return false;
		              }
		              fReader = new FileReader();
		              fReader.readAsDataURL(img_file);
		              fReader.onload = function(event){
		                  destDom.innerHTML='';
		                  destDom.innerHTML = '<img src="'+event.target.result+'" width="' + opts.width + 'px" height="' + opts.height + 'px"/>';
		              };
		          },false);
		    }
		}
		
    });
})(jQuery);